﻿@page "/ToastService"

<h1>ToastService</h1>

<p>
    The ToastService is a service that can be used to show toasts. It can be injected into a page and used to show 
    different type of toasts.
</p>
<p>
    For a component to be useable by the ToastService, it needs to implement <code>IToastContentComponent&lt;T&gt;</code> 
    where <code>T</code> represent the type of the data to be shown in the toast.
</p>
<p>
    The ToastService is automatically registered in the DI container with the <code>AddFluentUIComponents()</code> call.
</p>

<h2 id="toastcontainer">Toast container</h2>

<strong>IMPORTANT!!</strong>

<p>
    Toasts are rendered through the <code>&lt;FluentToastProvider /&gt;</code> component. This component needs to be added to the main layout of your application/site.
    You typically do this in the <code>MainLayout.razor</code> file at the end of the <code>&lt;main&gt;</code> section like this:
</p>

<CodeSnippet>
    &lt;main&gt;
        &lt;nav&gt;
        :
        &lt;/nav&gt;
        &lt;div class=&quot;content&quot;&gt;
            &lt;article id=&quot;article&quot;&gt;
                @@Body
            &lt;/article&gt;
        &lt;/div&gt;
        &lt;FluentToastProvider MaxToastCount=&quot;10&quot; /&gt;
    &lt;/main&gt;
</CodeSnippet>

<p>
    See the documentation below for more information about the <code>FluentToastProvider</code> parameters.
</p>

<h2 id="example">Examples</h2>

<p>
    See the <a href="/Toast">toast page</a> for examples of the different types of available toasts:
    <ul>
        <li>Confirmation toast</li>
        <li>Communication toast</li>
        <li>Progress toast</li>
    </ul>
</p>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(ToastService)" />

<ApiDocumentation Component="typeof(FluentToastProvider)" />

